<template>
  <div class="home">
    <van-nav-bar fixed>
      <template #left>
        <img src="../../assets/toutiao_logo.png" class="logo" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="toSearch"/>
      </template>
    </van-nav-bar>
    <!-- 编辑频道图标 -->
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="popShow=true"/>
    <van-popup v-model="popShow">
      <ChannelEdit @closePop='closePopFn'></ChannelEdit>
    </van-popup>
    <van-tabs
      v-model="channel_id"
      animated
      @click="getList(null)"
      sticky
      offset-top="1.226667rem"
      :before-change='beforeChangeFn'
      @change='tabChangeFn'
    >
      <van-tab
        v-for="item in channelsArr"
        :key="item.id"
        :title="item.name"
        :name="item.id"
      >
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="padding-bottom:1.22667rem">

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          loading-text="获取更多中..."
          @load="onLoad"
          :immediate-check="false"
        >
          <!-- 文章列表 -->
        <ArticleItem
          v-for="item in atticLelistArr"
          :key="item.art_id"
          :obj="item"
          :isShow="true"
          @click.native="toDetailPage(item.art_id)"
        >
        </ArticleItem>
        </van-list>
      </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannels, getArticleList } from '@/api'
import ArticleItem from '@/views/Home/ArticleItem'
import ChannelEdit from './ChannelEdit.vue'
export default {
  components: {
    ArticleItem,
    ChannelEdit
  },
  data () {
    return {
      channelsArr: [],
      channel_id: 0,
      atticLelistArr: [],
      timestamp: '',
      loading: false, // 底部加载状态
      finished: false, // 数据是否全部加载完成
      popShow: false,
      isLoading: false, // 下拉刷新
      channelScroll: {

      }
    }
  },
  watch: {
    channel_id (newVal, oldVal) {
      this.atticLelistArr = []
    }
  },
  async created () {
    const res = await getUserChannels()
    this.channelsArr = res.data.data.channels
    this.getList()
    // window.addEventListener('scroll', () => {
    //   console.log(document.documentElement.scrollTop)
    // })
  },
  methods: {
    beforeChangeFn () {
      this.channelScroll[this.channel_id] = document.documentElement.scrollTop
      return true
    },
    tabChangeFn () {
      const ts = this.channelScroll[this.channel_id]
      console.log(ts, 123)
      setTimeout(() => {
        document.documentElement.scrollTop = ts
        console.log(document.documentElement.scrollTop)
      }, 0)
    },
    onLoad () {
      if (this.atticLelistArr.length > 0) {
        this.getList(this.timestamp)
      }
      // 调用接口为异步，因此不可以在此处修改loading的值
    },
    // 获取文章列表
    async getList (time) {
      const params = {
        channel_id: this.channel_id,
        timestamp: time || new Date().getTime()
      }
      const articleListRes = await getArticleList(params)
      if (articleListRes?.data?.data?.pre_timestamp === null) {
        this.finished = true
      }
      articleListRes.data.data.results.forEach(item => {
        this.atticLelistArr.push(item)
      })
      this.timestamp = articleListRes.data.data.pre_timestamp
      this.loading = false
      this.isLoading = false
    },
    closePopFn (id) {
      this.popShow = false
      this.channel_id = id
      this.getList()
    },
    // 跳转搜索页面
    toSearch () {
      this.$router.push('/search')
    },
    // 下拉刷新事件
    onRefresh () {
      this.atticLelistArr = []
      this.getList(null)
      this.$toast('刷新成功')
    },
    // 跳转到详情页面
    toDetailPage (id) {
      this.$router.push({
        path: '/article-detail',
        query: {
          artId: id
        }
      })
    }
  }
}
</script>

<style scoped>
.home >>> .van-tabs__line {
  background-color: #007bff;
}
/* tab内容距离tab导航的距离 */
.home >>> .van-tabs__content {
  padding-top: 44px;
}
.van-nav-bar {
  background: #007bff;
}

::v-deep .van-nav-bar__title {
  color: #fff;
}
.logo {
  width: 100px;
  height: 30px;
}
/* 设置 tabs 容器的样式 */
.home >>> .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
::v-deep .van-popup{
  width: 100%;
  height: 100%;
}
</style>
